<template>
  <div @touchmove.prevent class="nav-bar">
    <van-nav-bar>
     <template #left>
        <div class="left-arrow"><slot name="left"></slot></div>
    </template>
     <template #title>
        <div class="center"><slot name="center"></slot></div>
    </template>
     <template #right>
            <div><slot name="right"></slot></div>
    </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  name: 'NavBar'
}
</script>

<style lang='less' >
.nav-bar{
 .van-nav-bar{
    background-color: #3296fa;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    .van-nav-bar__title {
      color: #fff;
    }
    .van-icon{
      color: #fff;
    }
  }
   .van-nav-bar::after{
      border:none !important;
    }
}
</style>
